<template>
  <div class="bg foot_box">
    <div class="content">
      <el-row>
        <el-col :span="8" :xs="24">
          <div>
            <h4>Homepage <br /> headline text</h4>
            <p class="foot_p">中文 </p>
            <div class="f_links">
              <img src="@/assets/img/i1.png" alt="">
              <img src="@/assets/img/i2.png" alt="">
              <img src="@/assets/img/i3.png" alt="">
              <img src="@/assets/img/i4.png" alt="">
            </div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24" >
          <ul class="f_nav">
            <li>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
            </li>
            <li>
              <p>公司</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
            </li>
          </ul>
        </el-col>
        <el-col :span="8" :xs="24" >
          <ul class="f_nav">
            <li>
              <p>资源</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
            </li>
            <li>
              <p>政策</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
              <p>产品</p>
            </li>
          </ul>
        </el-col>
        <el-col :span="24">
          <div class="f_logo flex">
            <a href="/"><img src="@/assets/logo.svg" alt="logo"></a>
            <span>
              <router-link to="/login">登录</router-link>
            </span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
    
</template>

<script>
export default {
  data(){
    return{
        // name:"测试网",
    }
  },
  methods:{

  },
}
</script>

<style lang="less" scoped>
  .foot_box{
    padding: 80px 20px;background: #000;color:#fff;
    h4{font-size: 36px;color: #4656E4;}
  }
  .f_links{
    display: flex;
    img{height: 24px;width: 24px;margin-right: 24px;}
  }
  .foot_p{margin: 30px 0;}
  .f_nav{
    display: flex;
    li{
      margin: 20px 0 0 0;
      flex: 1;
      p{
        margin-top: 10px;
        &:nth-child(1){
          color: #4656E4;
        }
      }
    }
  }

  .f_logo{
    border-top: 1px solid #4656E4;padding-top: 40px;margin-top: 50px;
    span a{color: #fff;
    background: #4656E4;
    padding: 5px 10px;
    border-radius: 40px;
    font-size: 10px;
    font-weight: bold;}
  }

  @media screen and (max-width:768px ) {
    .foot_box{
      padding: 40px 20px;
      h4{font-size: 28px;}
    }
    .f_logo{
      padding-top: 30px;margin-top: 40px;
    }
    .foot_p{margin: 10px 0;}
  }
</style>
